html,
body {
  min-height: 100%;
}
body {
  background: linear-gradient(to bottom, #03020a, #3a3136);
  text-align: center;
}

$bg-hover: #f20081;
// $bg-active: adjust-hue($bg-hover, -136%);
.pagination {
  margin-top: 200px;
  font-weight: bold;
  font-size: 16px;
  font-family: "helvetica neue", helvetica, arial, sans-serif;
  a {
    padding: 8px 16px;
    border: 1px solid lighten(black, 15%);
    border-radius: 3px;
    box-shadow: 0 0 6px rgba(black, 0.6), inset 0 1px rgba(white, 0.4);
    color: #333;
    background: linear-gradient(
      to bottom,
      darken(white, 11%),
      darken(white, 18%)
    );
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(white, 0.72);
    &:hover {
      background: linear-gradient(
        to bottom,
        darken($bg-hover, 5%),
        darken($bg-hover, 16%)
      );
      color: darken(#f20081, 40%);
    }
    &.active {
      background: linear-gradient(to bottom, #00add9, #00708c);
      color: #001e26;
    }
    &.prev,
    &.next {
      &:hover {
        color: #ebebeb;
        text-shadow: none;
        background: linear-gradient(to bottom, #262626, #1a1a1a);
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.6),
          inset 0 1px rgba(255, 255, 255, 0.1);
      }
    }
    &.prev {
      &:before {
        content: "<< ";
        font-weight: normal;
      }
    }
    &.next {
      &::after {
        content: " >>";
        font-weight: normal;
      }
    }
  }
}
